@include b('control-odoo-search-bar') {
  width: 100%;
  min-width: MIN(600px, 33vw);

  @include e('reference') {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding-right: 32px;
    border-radius: 4px;

    @include m('left') {
      display: flex;
      flex: 1;
      align-items: center;
      padding: 2px 0;
      border: 1px solid getCssVar(color, border);
      border-right: none;
      border-radius: 4px 0 0 4px;

      .el-input__wrapper,
      .el-input__inner {
        border: none;
        box-shadow: none;
      }

      .el-input__wrapper {
        padding: 0 4px;
      }

      .el-input__inner {
        height: calc(24px);
      }

      .el-input {
        flex-grow: 1;
        min-width: 120px;
        line-height: 24px;
      }
    }

    @include m('prefix') {
      width: 32px;

      &.el-button.el-button {
        color: getCssVar(color, text, 2);
        background-color: transparent;
      }
    }

    @include m('content') {
      flex: 1;
    }

    @include m('suffix') {
      position: absolute;
      right: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 100%;

      &.el-button {
        color: getCssVar(color, text, 2);
        background-color: transparent;
        border: 1px solid getCssVar(color, border);
        border-radius: 0 4px 4px 0;

        &:hover {
          background-color: getCssVar(color, fill, 1);
        }
      }
      @include when('active') {
        background-color: getCssVar('color', primary, light, default) !important;
        border-color: getCssVar('color', primary) !important;
      }
    }

    .el-button {
      height: 100%;
      padding: 0;
      color: getCssVar(color, text, 2);

      &:hover {
        color: getCssVar(color, text, 2);
      }
    }

    @include when('search-focus') {
      .#{bem('control-odoo-search-bar__reference--left')} {
        border-color: getCssVar(color, primary);
      }
    }
  }

  @include e('search-content') {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;

    .el-input {
      flex-grow: 1;
      width: auto;
    }
  }

  @include e('search-item') {
    display: flex;
    align-items: center;
    width: auto;
    height: 24px;
    overflow: hidden;
    font-size: 12px;
    background-color: getCssVar(color, fill, 0);
    border-radius: 4px;

    &:hover {
      background-color: transparent;
      box-shadow: 0 0 0 1px getCssVar(color, border) inset;
    }

    @include m('icon') {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      min-width: 24px;
      height: 100%;
      color: getCssVar('color', 'primary', text);
      background-color: getCssVar('color', 'primary');
    }

    @include m('caption') {
      max-width: 16rem;
      padding-left: 8px;
      @include utils-ellipsis;
    }

    @include m('remove') {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      font-size: 16px;
      cursor: pointer;

      &:hover {
        svg {
          color: getCssVar('color', 'primary', text);
          background-color: getCssVar(color, text, 2);
          border-radius: 50%;
        }
      }
    }
    @include m('collect') {
      .#{bem('control-odoo-search-bar__search-item--icon')} {
        color: black;
        background-color: #f3cc00;
      }
    }
  }

  @include e('popover') {
    &.el-popover.el-popper {
      min-width: 512px;
      padding: 0;
    }
  }

  @include e('content') {
    display: flex;
    width: 100%;
    padding: 16px 0;
  }

  @include e('list') {
    flex-grow: 1;
    width: 33%;
    padding: 0 16px;

    @include m(content) {
      max-height: 300px;
      overflow: auto;
    }

    &:not(:last-child) {
      border-right: 1px solid getCssVar(color, border);
    }

    @include m('header') {
      display: flex;
      align-items: center;
      padding: 0 16px;
      margin-bottom: 8px;
      font-size: 15px;
      font-weight: 700;

      .icon {
        padding-right: getCssVar(spacing, tight);
        color: getCssVar(color, primary);
      }
    }

    @include m('item') {
      display: flex;
      align-items: center;
      width: 100%;
      height: 32px;
      padding: 0 16px;
      cursor: pointer;

      &:hover {
        background-color: getCssVar(color, fill, 1);
      }

      .selected-icon {
        padding-right: getCssVar(spacing, tight);
        font-size: 10px;
        color: getCssVar(color, primary);
        visibility: hidden;

        &.is-selected {
          visibility: visible;
        }
      }

      .caption {
        flex-grow: 1;
        @include utils-ellipsis;

        &.action-caption {
          margin-left: 16px;
        }
      }

      .action {
        display: flex;
        gap: 2px;
        align-items: center;
      }

      .action-icon {
        font-size: 16px;
        color: getCssVar(color, text, 1);
        visibility: hidden;

        &:hover {
          color: getCssVar(color, primary, hover);
        }

        &.remove-icon {
          font-size: 18px;

          &:hover {
            color: getCssVar(color, danger);
          }
        }
      }

      &:hover {
        .action-icon {
          visibility: visible;
        }
      }

      .collapse-icon {
        margin-left: getCssVar(spacing, tight);
        font-size: 18px;
      }
    }

    @include m('separator') {
      margin: 8px 0;
    }
  }

  @include e('collect-list') {
    .#{bem('control-odoo-search-bar__list--header')} {
      .icon {
        color: #f3cc00;
      }
    }
  }

  @include e('expand-item') {
    margin-left: 36px;
    border-left: 1px solid getCssVar(color, border);

    @include m(form) {
      padding: 8px 16px;
    }
    @include m('btn') {
      padding: 8px 0;
    }

    .el-input__wrapper {
      padding: 0 4px;
      border-bottom: 1px solid getCssVar(color, border);
      box-shadow: none;

      .el-input__inner {
        color: currentcolor;
      }
    }

    .el-button {
      width: 100%;
    }

    .item {
      position: relative;
      padding: 3px 20px;
      line-height: 21px;
      cursor: pointer;

      &:hover {
        background-color: getCssVar(color, fill, 1);
      }

      &.is-selected::before {
        position: absolute;
        inset: 0 auto auto;
        font: .7em / 1em FontAwesome;
        color: getCssVar(color, primary);
        content: "\f00c";
        transform: translate(-1.5em, 90%);
      }
    }
  }

  @include e(dropdown) {

    @include m(popper-content) {
      .el-input {
        padding: 8px;
      }

      .el-dropdown-menu {
        max-height: 300px;
        overflow: auto;
      }
    }
  }
}
